<template>
  <div>
    <project-header :is-border="isBorder"></project-header>
    <div class="body">
      <div class="body-left floatLeft">
        <span class="left-title block">Only backers can post comments.</span>
        <div class="left-box" v-for="item in leftList" :class="item.class">
          <div class="people-head floatLeft">
            <span class="block"></span>
          </div>
          <div class="text floatLeft">
            <div class="text-title">
              <span class="title-name lineBlock">{{item.name}}</span>
              <span class="title-button lineBlock">{{item.button}}</span>
              <span class="title-about">{{item.about}}</span>
            </div>
            <div class="text-txt">
              <span class="block txt-start">{{item.start}}</span>
              <span class="block txt-end">{{item.end}}</span>
              <span class="block">{{item.cheers}}</span>
              <span class="block">{{item.lastName}}</span>
              <span><a>{{item.a}}</a></span>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="body-right floatLeft">
        <span class="block">Use this space to cheer the creator along, and talk to your fellow backers.</span>
        <span class="block">Have a question?</span>
        <span class="block"><a href="javascript:(viod)">Check out the FAQ</a></span>
      </div>
      <div class="clear"></div>
    </div>
  </div>

</template>

<script>
  import projectHeader from '../public/ProjectHeader'
    export default {
        name: "project-details-comments",
        components:{ projectHeader },
        data(){
          return{
            leftList:[
              { name:'Steve Lloyd', button:'Creator', about:'about 10 hours ago', start:'Hi Peter. Thanks for your interest(and compliment!). The Release Edition Chroma is still available to back until the end of the campaign. The only difference between that and the $275 reward is that the $250 version won’t be delivered until after the otherr cameras are built.',
                end:'Hi Peter. Thanks for your interest(and compliment!). The Release Edition Chroma is still available to back until the end of the campaign. The only difference between that and the $275 reward is that the $250 ve.',
                cheers:'Cheers', lastName:'Steve', a:'', class:''
              },
              { name:'Peter Sutherland', button:'', about:'about 11 hours ago', start:'Dear Steve, ',
                end:'Thanks for your interest(and compliment!). The Release Edition Chroma is still available to back until the end of the campaign. The only difference between that and the $275 reward is that the $250 version won’t be delivered until after the otherr cameras are built. Thanks for your interest(and compliment!). The Release Edition Chroma is still available to back until the end of the campaign. The only difference between that and the $275 reward is that the $250 version won’t be delivered until after the otherr cameras are built.delivered until after the otherr camer  Cheers, Peter S.',
                cheers:'', lastName:'', a:'',class:'none'
              },
              { name:'Steve Lloyd', button:'Creator', about:'about 10 hours ago', start:'Hi Peter. Thanks for your interest(and compliment!). The Release Edition Chroma is still available to back until the end of the campaign. The only difference between that and the $275 reward is that the $250 version won’t be delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.',
                end:'',
                cheers:'Cheers', lastName:'Steve', a:'',class:''
              },
              { name:'Steve Lloyd', button:'Creator', about:'about 10 hours ago', start:'Hi Peter. Thanks for your interest(and compliment!). The Release Edition Chroma is still available to back until the end of the campaign. The only difference between that and the $275 reward is that the $250 version won’t be delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.delivered until after the otherr cameras are built.',
                end:'',
                cheers:'Cheers', lastName:'Steve', a:'', class:''
              },
              { name:'Peter Sutherland', button:'', about:'about 11 hours ago', start:'Thanks for your interest(and compliment!). The Release Edition Chroma is sti.',
                end:'',
                cheers:'', lastName:'', a:'', class:'none'
              },
              { name:'Peter Sutherland', button:'', about:'about 11 hours ago', start:'Thanks for your interest(and compliment!). The Release Edition Chroma is sti.Thanks for your ',
                end:'',
                cheers:'', lastName:'', a:'Http://www.angusparkerphoto.com',class:'none'
              }
            ],
            isBorder:[ false, false, false, true, false ]
          }
        },
    }
</script>

<style scoped lang="scss">
  .floatLeft{float: left}
  .clear{clear: both}
  .block{display: block}
  .lineBlock{display: inline-block}
  .body{
    box-shadow: 0 -1px 0 0 #DBDEDD;
    padding:75px 0 0 200px;
    .body-left{
      margin-bottom: 101px;
      width: 678px;
      .left-title{
        text-align: center;
        line-height: 60px;
        background: #F0F0F0;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #2E2E2E;
        letter-spacing: -0.1px;
        margin-bottom: 52px;
      }
      .left-box{
        padding-bottom: 29px;
        width: 658px;
        background: #E1E8FE;
        border: 1px solid #C7D4FD;
        margin:0 0 20px 18px;
        .people-head{
          padding:22px 14px 0 22px;
          span{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: blanchedalmond;
          }
        }
        .text{
          width: 578px;
          font-family: PingFangSC-Regular;
          color: #2E2E2E;
          .text-title{
            margin: 25px 0 8px 0;
            .title-name{
              font-family: PingFangSC-Medium;
              font-size: 14px;
              letter-spacing: -0.2px;
              line-height:23px;
              margin-right: 6px;
            }
            .title-button{
              margin-right: 6px;
              padding: 0 6.5px;
              line-height: 23px;
              text-align: center;
              background: #3465F6;
              color: #ffffff;
            }
            .title-about{
              margin-left: 6px;
              font-size: 12px;
            }
          }
          .text-txt{
            width: 578px;
            font-size: 14px;
            line-height: 21px;
              .txt-start{margin-bottom: 5px;}
              a{color: #3465F6;}
          }
        }
      }
      .none{
        border: none;
        background-color: #ffffff;
      }
    }
    .body-right{
      border-left: 3px solid #DBDEDD;
      height: 158px;
      margin-left: 45px;
      padding:12.5px 0 0 22px;
      box-sizing: border-box;
      span{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #2E2E2E;
        line-height: 28px;
        width: 280px;
        a{
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          letter-spacing: -0.4px;
          color: #2E2E2E;
          border-bottom: 1px solid black;
        }
      }
      span:nth-child(2){
        margin: 20px 0 4px 0;
      }
    }
  }
</style>
